import { useState,useEffect } from 'react'
import axios from 'axios'
import {useRequest} from 'ahooks'
import Lazyload from 'react-lazyload'
function App() {
 
  const getMoive = () => {
   return new Promise((resolve,reject) =>{
    axios.get('init_movie')
    .then(res => {
      console.log(res);
      resolve(res.data.data)
    })
   })
  }
  let {data:movies=[], loading, error} = useRequest(getMoive)
  useEffect( () => {
    // let {movies, loading, error} = useRequest(getMoive)
    // axios.get('init_movie')
    //   .then(res => {
    //     console.log(res)
    //   })
  },[])

  return (
    <div className="App">
      {error && <div>出错了</div>}
      {loading && <div>loading</div>}
      {movies.map(item => 
        <div key={item.key}>
          <div>{item.title}</div>
          <div>{item.content}</div>
         <Lazyload>
          <div><img src={item.avatar}/></div>
         </Lazyload>
        </div>
      )}
    </div>
  )
}

export default App
